<div class="row">
    <div class="col-md-12">
        <!-- 统计卡片 -->
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-primary">
                        <i class="fa fa-dollar-sign"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">本月提成</span>
                        <span class="info-box-number">¥{{ number_format($statistics['total_commission_this_month'], 2) }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-warning">
                        <i class="fa fa-clock"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">待结算</span>
                        <span class="info-box-number">¥{{ number_format($statistics['pending_settlement'], 2) }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-success">
                        <i class="fa fa-check-circle"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">已结算</span>
                        <span class="info-box-number">¥{{ number_format($statistics['settled_this_month'], 2) }}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box">
                    <span class="info-box-icon bg-info">
                        <i class="fa fa-store"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">自提点数</span>
                        <span class="info-box-number">{{ $statistics['total_pickup_points'] }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 提成明细列表 -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="fa fa-money-bill-wave"></i> 提成明细
                </h4>
                <div class="card-tools">
                    <button class="btn btn-warning btn-sm">
                        <i class="fa fa-calculator"></i> 批量结算
                    </button>
                    <button class="btn btn-success btn-sm">
                        <i class="fa fa-download"></i> 导出报表
                    </button>
                </div>
            </div>
            <div class="card-body">
                <!-- 筛选栏 -->
                <div class="row mb-3">
                    <div class="col-md-3">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="搜索自提点名称...">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control">
                            <option value="">全部状态</option>
                            <option value="待结算">待结算</option>
                            <option value="已结算">已结算</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control">
                            <option value="">选择月份</option>
                            <option value="2024-02">2024年2月</option>
                            <option value="2024-01">2024年1月</option>
                            <option value="2023-12">2023年12月</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-control">
                            <option value="">提成比例</option>
                            <option value="2.5">2.5%</option>
                            <option value="3.0">3.0%</option>
                            <option value="3.5">3.5%</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <input type="number" class="form-control" placeholder="最小金额" step="0.01">
                            <div class="input-group-append input-group-prepend">
                                <span class="input-group-text">-</span>
                            </div>
                            <input type="number" class="form-control" placeholder="最大金额" step="0.01">
                        </div>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead class="table-dark">
                            <tr>
                                <th>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="selectAll">
                                        <label class="custom-control-label" for="selectAll"></label>
                                    </div>
                                </th>
                                <th>自提点</th>
                                <th>结算月份</th>
                                <th>订单数量</th>
                                <th>提成比例</th>
                                <th>订单总额</th>
                                <th>提成金额</th>
                                <th>结算状态</th>
                                <th>结算日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($commissions as $commission)
                            <tr>
                                <td>
                                    @if($commission['status'] == '待结算')
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="select_{{ $commission['id'] }}" value="{{ $commission['id'] }}">
                                        <label class="custom-control-label" for="select_{{ $commission['id'] }}"></label>
                                    </div>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-sm rounded-circle bg-primary text-white mr-2">
                                            <i class="fa fa-store"></i>
                                        </div>
                                        <strong>{{ $commission['pickup_point'] }}</strong>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge badge-light">{{ $commission['month'] }}</span>
                                </td>
                                <td>
                                    <div class="text-center">
                                        <strong>{{ number_format($commission['total_orders']) }}</strong>
                                        <small class="text-muted d-block">单</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge badge-info">{{ $commission['commission_rate'] }}</span>
                                </td>
                                <td>
                                    <strong class="text-success">¥{{ number_format($commission['total_amount'], 2) }}</strong>
                                </td>
                                <td>
                                    <strong class="text-primary">¥{{ number_format($commission['commission_amount'], 2) }}</strong>
                                </td>
                                <td>
                                    @if($commission['status'] == '已结算')
                                        <span class="badge badge-success">
                                            <i class="fa fa-check mr-1"></i>已结算
                                        </span>
                                    @else
                                        <span class="badge badge-warning">
                                            <i class="fa fa-clock mr-1"></i>待结算
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($commission['settled_at'])
                                        <small>{{ $commission['settled_at'] }}</small>
                                    @else
                                        <small class="text-muted">-</small>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-info" title="查看详情">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                        @if($commission['status'] == '待结算')
                                            <button class="btn btn-outline-success" title="立即结算">
                                                <i class="fa fa-dollar-sign"></i>
                                            </button>
                                        @endif
                                        <div class="btn-group">
                                            <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-h"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">
                                                    <i class="fa fa-chart-bar"></i> 查看报表
                                                </a>
                                                <a class="dropdown-item" href="#">
                                                    <i class="fa fa-download"></i> 导出明细
                                                </a>
                                                @if($commission['status'] == '已结算')
                                                <a class="dropdown-item" href="#">
                                                    <i class="fa fa-receipt"></i> 结算凭证
                                                </a>
                                                @endif
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item text-warning" href="#">
                                                    <i class="fa fa-edit"></i> 调整提成
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="5" class="text-right">合计:</th>
                                <th class="text-success">¥{{ number_format(collect($commissions)->sum('total_amount'), 2) }}</th>
                                <th class="text-primary">¥{{ number_format(collect($commissions)->sum('commission_amount'), 2) }}</th>
                                <th colspan="3"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- 分页 -->
                <nav aria-label="提成分页" class="mt-3">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <span class="page-link">上一页</span>
                        </li>
                        <li class="page-item active">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<!-- 批量结算模态框 -->
<div class="modal fade" id="batchSettlementModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fa fa-calculator"></i> 批量结算确认
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>您确定要结算以下提成吗？</p>
                <div id="selectedItems"></div>
                <div class="alert alert-info">
                    <i class="fa fa-info-circle"></i>
                    结算后资金将转入对应自提点账户，此操作不可撤销。
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success">确认结算</button>
            </div>
        </div>
    </div>
</div>

<style>
.avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
</style>